<template>
  <div>
    <el-card >
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>  
      </div>
  <el-form ref="form" :model="form" label-width="80px" size="mini">
     <el-form-item label="特殊资源">
    <el-radio-group v-model="form.resource">
      <el-radio :label="null">全部</el-radio>
      <el-radio :label="0">草稿</el-radio>
      <el-radio :label="1">待审核</el-radio>
      <el-radio :label="2">审核通过</el-radio>
      <el-radio :label="3">审核失败</el-radio>
      <el-radio :label="4">已删除</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="频道">
    <el-select v-model="form.channel_id" placeholder="请选择频道">
      <el-option v-for="item in channelss" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-date-picker
      v-model="date"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['12:00:00']"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd">
    </el-date-picker>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">筛选</el-button>
  </el-form-item>
</el-form>
    </el-card>
    <el-card>
      <div slot="header"  class="clearfix">
        <p>根据筛选条件到{{total_count}}条结果:</p>
      </div>
       <el-table
    :data="articletablesinfo"
    stripe
    style="width: 100%"
     v-loading="loading">
    <el-table-column label="封面" width="400">
    <template slot-scope="scope">
      <img v-if="scope.row.cover.images[0]" :src='scope.row.cover.images' class="images" > 
      <img v-else src="~assets/img/errorphoto.jpg">
    </template>
    </el-table-column>
    <el-table-column
      prop="title"
      label="标题"
      width="400">
    </el-table-column>
    <el-table-column
      label="状态"
      width="130">
      <template slot-scope="scope">
       <el-tag :type="articleStatus[scope.row.status].type">{{articleStatus[scope.row.status].text}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="pubdate"
      label="发布时间">
    </el-table-column>
    <el-table-column
      prop="address"
      width="200"
      label="操作">
      <template slot-scope="scope">
        <el-button size="	medium" type="primary" icon="el-icon-edit" @click ="editor(scope.row)" circle></el-button>
         <el-button type="danger" icon="el-icon-delete" @click="message(scope.row)" circle></el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-card>
    <el-pagination
     background
     :disabled='loading'
     @current-change="handleCurrentChange"
     layout="prev, pager, next"
     :total="(total_count/15)">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name:'artucle',
    data () {
      return {
        form: {
          channel_id: null,
          begin_pubdate:'',
          end_pubdate:'',
          resource: null,
          page:1
        },
        //内容总条数
          total_count:'',
          date: [],
          channelss:[],
          articletablesinfo:[],
          articleStatus:[
            {status:0,text:'草稿',type:'info'},
            {status:1,text:'待审核',type:''},
            {status:2,text:'审核通过',type:'success'},
            {status:3,text:'审核失败',type:'warning'},
            {status:4,text:'已删除',type:'danger'},
          ],
          loading:false
      }
    },
    created () {
      this.article()
      this.getchannels()
    },
    methods: { 
      async onSubmit() {
      this.loading=true
      let result = await this.$http.get('/mp/v1_0/articles',{params:{
        page:this.form.page,
        per_page:15,
        channel_id:this.form.channel_id,
        begin_pubdate:this.date ? this.date[0] :null,
        end_pubdate:this.date ? this.date[1] : null,
        status:this.form.resource  
      }})
      // console.log(this.form.resource)
      this.articletablesinfo = result.data.data.results
      this.total_count=result.data.data.total_count
      console.log(result)
      this.loading=false
      },
      async  article(){
      this.loading=true
      let result = await this.$http.get('/mp/v1_0/articles')
       this.articletablesinfo = result.data.data.results
       this.total_count=result.data.data.total_count 
       this.loading=false
      },
      //获取文章频道
      async getchannels(){
        let result = await this.$http.get('mp/v1_0/channels')
        this.channelss = result.data.data.channels       
      },
      //跳转
      handleCurrentChange(val){
        this.form.page = val
        this.onSubmit()
      },
      // 删除弹窗功能
      async message(articleinfo){
          this.$confirm(`此操作将永久删除${articleinfo.title}, 是否继续?, 提示`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.remove(articleinfo)
         this.onSubmit()
         this.$message({
            type: 'success',
            message: '成功删除'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
     //删除文章
     async remove(articleinfo){
       console.log(articleinfo)
        const result = await this.$http.delete(`/mp/v1_0/articles/${articleinfo.id.toString()}`)
     },
    //  编辑文章
    editor(info){
      this.$router.push(`/publish?id=${info.id}`)
    }
    }
  }
</script>
<style lang="less" scoped>
.el-breadcrumb{
  font-size: 18px;
}
.el-card{
  margin-top: 20px;
}
.el-pagination{
  margin:45px 0 0 800px;
}
  img{
    width: 250px;
    height: 130px;
  }

</style>